<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账目管理</el-breadcrumb-item>
      <el-breadcrumb-item>账目分类列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div class="header">
        <h2>账目分类列表</h2>
        <h3>【添加账目记录时 请在分类栏填入对应分类的id】</h3>  
      </div>

      <!-- 分类表格 -->
      <el-table :data="categoryList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="分类ID" prop="id"></el-table-column>
        <el-table-column label="分类名字" prop="name"></el-table-column>
        <el-table-column label="分类类型" prop="type"></el-table-column>
      </el-table>


    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return{
      //分类表
      categoryList:[],
    }
  },
  created(){
    this.getCategoryList(window.sessionStorage.getItem('userId'));
  },
  methods:{
    async getCategoryList(id){
      const { data: res } = await this.$http.get(`CategoryList/`+id);
      if (!res) return this.$message.error("fail");
      this.categoryList=res
      
    }
  }
}
</script>

<style style="less" scoped>
.header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h3{
  margin-top: 0px;
}
</style>